<template>
  <view class="fontsize" :class="APP_FONT_SIZE">
    <custom
      title="设置字体大小"
      mode="2"
      fixed="fixed"
      :pageBack="true"
      @goback="goback"
    >
      <view slot="right" class="orange" @tap="uniBack"> 完成 </view>
    </custom>
    <view class="" v-for="(info, i) in infoArray" :key="i">
      <msgText :info="info"></msgText>
    </view>
    <!-- 底部调整字体大小 -->
    <view class="footer">
      <view class="a-box flex flex-x-b">
        <view class="fs-18"> A </view>
        <view class="fs-30"> A </view>
        <view class="fs-42"> A </view>
      </view>
      <slider
        :value="value"
        activeColor="#FFCC33"
        @change="sliderChange"
        step="50"
      />
    </view>
  </view>
</template>

<script>
import msgText from "../../components/chat/msg-text.vue";
export default {
  components: { msgText },
  data() {
    return {
      infoArray: [
        {
          mine: false,
          avatarUrl: "../../static/my/user1.webp",
          name: "张三",
          content: "你在干嘛干嘛干嘛",
          timestamp: "124",
        },
        {
          mine: true,
          avatarUrl: "../../static/my/user2.webp",
          name: "李四",
          content: "我在搬家",
          timestamp: "124",
        },
      ], // 默认样式
      size: ["small", "medium", "big"],
      value: 50, // 默认位置
      oldsetting: "", //旧的设置值
    };
  },
  onShow() {
    if (this.APP_FONT_SIZE) {
      this.value =
        this.size.findIndex((item) => item === this.APP_FONT_SIZE) * 50;
      this.oldsetting = this.APP_FONT_SIZE;
    }
  },
  methods: {
    sliderChange(e) {
      this.value = e.detail.value;
      this.vuexSet("APP_FONT_SIZE", this.size[this.value / 50], true);
    },
    goback() {
      this.vuexSet("APP_FONT_SIZE", this.oldsetting, true);
      this.uniBack();
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background: #f5f6f7;
}

.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 300rpx;
  background-color: #fff;
  padding-top: 60rpx;

  .a-box {
    height: 80rpx;
    padding: 20rpx;
  }
}

.orange {
  color: #FD7747;
  font-size:26rpx;
  white-space: nowrap;
}
</style>